import React, {Component} from 'react';
import Detail from "./Detail";
import {Link, Route} from "react-router-dom";

class Index extends Component {
    state = {
        messageArr: [
            {
                id: '01',
                title: '消息1',
            },
            {
                id: '02',
                title: '消息2',
            },
            {
                id: '03',
                title: '消息3',
            }
        ]
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageArr.map(item => {
                            return (
                                <li key={item.id}>
                                    {/*向组件传递params参数*/}
                                    {/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>*/}
                                    {/*向组件传递Search参数*/}
                                    {/*<Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}
                                    {/*向组件传递state参数*/}
                                    <Link to={{
                                        pathname: '/home/message/detail',
                                        state: {id: item.id, title: item.title}
                                    }}>{item.title}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/*向组件传递params参数*/}
                {/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}
                {/*向组件传递Search参数，无需声明接收*/}
                {/*<Route path="/home/message/detail" component={Detail}/>*/}
                {/*向组件传递State参数，无需声明接收*/}
                <Route path="/home/message/detail" component={Detail}/>
            </div>
        );
    }
}

export default Index;